<template>
	<el-tab-pane v-for="item in classList" :key="item.id" :label="item.name">
		<el-table
			ref="multipleTable"
			:data="item.exps"
			tooltip-effect="dark"
			style="width: 100%; margin-top: -40px"
			@selection-change="handleSelectionChange(item.exps, item.id)"
		>
			<el-table-column
				type="selection"
				width="100"
				@select="handleSelect(scope.row)"
			>
			</el-table-column>
			<el-table-column label="学生" width="520" style="font-size: 20px">
				<template v-slot="scope">{{ scope.row.name }}</template>
				<!-- <router-view></router-view> -->
			</el-table-column>
		</el-table>

		<div style="margin-top: 20px">
			<el-button @click="toggleSelection([tableData[1], tableData[2]])"
				>全选</el-button
			>
			<el-button type="primary" @click="publish(tableData)"
				>发布</el-button
			>
		</div>
		<!-- </el-checkbox> -->
	</el-tab-pane>
</template>

<script setup lang="ts">
//@ts-nocheck
import { getStudent, postEx } from '@/api/request'
import { ref } from 'vue'
// 引入路由
import { useRoute } from 'vue-router'
// import router from '~/src/router'
const route = useRoute()
const multipleSelection = ref([])
const classList = ref([
	{
		id: 3,
		name: '液体粘滞系数的测定',
		exps: [
			{ id: 1, name: '学生1', state: 0 },
			{ id: 2, name: '学生2', state: 1 },
			{ id: 3, name: '学生3', state: 1 },
		],
	},
	{
		id: 10,
		name: '密立根油滴实验',
		exps: [
			{ id: 1, name: '学生1', state: 0 },
			{ id: 2, name: '学生1', state: 1 },
			{ id: 3, name: '学生1', state: 1 },
			{ id: 4, name: '学生1', state: 1 },
		],
	},
	{
		id: 15,
		name: '用牛顿环仪测量透镜的曲率半径',
		exps: [
			{ id: 1, name: '学生2', state: 0 },
			{ id: 2, name: '学生2', state: 1 },
			{ id: 3, name: '学生2', state: 1 },
			{ id: 4, name: '学生2', state: 1 },
		],
	},
	{
		id: 16,
		name: '迈克尔逊干涉仪的调节与使用',
		exps: [
			{ id: 1, name: '学生2', state: 0 },
			{ id: 2, name: '学生2', state: 1 },
			{ id: 3, name: '学生2', state: 1 },
			{ id: 4, name: '学生2', state: 1 },
		],
	},
])
// 返回的学生数据
const result = ref([])
// 查询班级的学生
const that = this
onMounted(() => {
	const jwtToken = localStorage.getItem('jwtToken')
	const cid = route.query.cid
	console.log(route.query.cid)
	// console.log(router)
	getStudent(jwtToken, cid).then((res) => {
		console.log(res, '返回的学生数据')
		// console.log(res, '返回的数据')
		result.value = res.data.data

		// 处理result的数据
		result.value = result.value.map((item) => ({
			sid: item.sid,
			cid: item.cid,
			name: item.name,
			updateTime: item.updateTime,
			state: 0,
			eid: '',
		}))
		console.log('处理后的result', result.value)
		// 处理classList的数据
		classList.value = classList.value.map((classInfo) => ({
			id: classInfo.id,
			name: classInfo.name,
			exps: result.value,
			state: '0',
		}))
	})
})
// 点击勾选
const handleSelect = (scope) => {
	// console.log(scope, '点击')
}
//点击的学生数组
const selected = ref([])
// 最后要传递的包含三个id的对象
const data = ref({
	cid: '',
	eid: '',
	sids: [],
})
const handleSelectionChange = (scope, id) => {
	scope[0].eid = id
	selected.value.push(scope)
	// console.log(scope, '点击', id, 'iddd')
	// console.log(scope[0], '123')
	// console.log(selected.value, '点击的选项')

	// selected.value = selected.value.map((item) => ({
	// 	sid: item[0].sid,
	// 	cid: item[0].cid,
	// 	eid: item[0].eid,
	// }))
	for (let index = 0; index < selected.value.length; index++) {
		selected.value[index] = selected.value[index].map((item) => ({
			sid: item.sid,
			cid: item.cid,
			eid: item.eid,
		}))
	}
	data.value.cid = selected.value[0][0].cid
	// data.value.sid = selected.value.map((item) => item[0].sid)
	for (let index = 0; index < selected.value.length; index++) {
		selected.value[index].forEach((element) => {
			data.value.sids.push(element.sid)
		})
	}
	// 对数组data.value.sid去重
	data.value.sids = [...new Set(data.value.sids)]
	data.value.eid = selected.value[0][0].eid
	// console.log(selected.value, '处理后的value')
	console.log(data.value, '处理后的data')
}
// 发布实验
const publish = (row) => {
	// console.log(row.value)
	const jwtToken = localStorage.getItem('jwtToken')

	postEx(jwtToken, data.value).then((res) => {
		console.log(res, '发布返回的结果')
	})

	ElMessage.success('发布成功')
}
// 选框状态
const checked = ref(true)
</script>

<style lang="scss" scoped>
</style>